<div class="form-group row" [formGroup]="parentFormGroup">
  <label class="col-sm-3 col-form-label">
    {{data.label}}: <span class="required" *ngIf="data?.required">*</span>
  </label>
  <div class="col-sm-9">
    <div class="input-group">
      <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="mode == MODES.View">
          <input type="number" name="{{data.name}}" placeholder="{{data?.placeholder}}" class="form-control"
                 [formControlName]="data.name"/>
          <div class="input-group-append">
            <span class="input-group-text" (click)="copyToClipboard()">
              <fa-icon [icon]="['far', 'clipboard']"></fa-icon>
            </span>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="mode == MODES.Create || mode == MODES.Edit">
          <input type="number" name="{{data.name}}" placeholder="{{data?.placeholder}}" class="form-control"
                 [formControlName]="data.name" (change)="numberChange($event)"
                 [ngClass]="{ 'is-valid': controller.valid && (controller.dirty || controller.touched),
                 'is-invalid': controller.invalid && (controller.dirty || controller.touched)}"/>
          <div *ngIf="data?.helperText" class="input-group-append">
            <span class="input-group-text">
              <fa-icon icon="info" placement="left" [ngbTooltip]="data?.helperText"></fa-icon>
            </span>
          </div>
        </ng-container>
        <div *ngSwitchDefault>
          <cmdb-mode-error></cmdb-mode-error>
        </div>
      </ng-container>
      <div *ngIf="controller.invalid && (controller.dirty || controller.touched)" class="invalid-feedback">
        <div class="float-right" *ngIf="controller.errors?.required">
          {{data.label}} is a required field.
        </div>
        <div class="float-right" *ngIf="controller.errors?.pattern">
          {{data.value}} your input does not match the set regex pattern: {{data.regex}}
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <small class="description form-text text-muted">{{data?.description}}</small>
  </div>
</div>
